<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      active: "",
      showBar: false,
    };
  },
  computed: {
    ...mapGetters("usermessage", ["shoppNum"]),
  },
  watch: {
    $route(route) {
      if (["home", "type", "cart", "my"].includes(route.name)) {
        this.showBar = true;
      } else {
        this.showBar = false;
      }
    },
  },
};
</script>

<template>
  <router-view></router-view>
  <van-tabbar
    v-if="showBar"
    route
    placeholder
    v-model="active"
    fixed
    active-color="#b82a2f"
  >
    <van-tabbar-item to="/">
      <template #icon="props">
        <span class="iconfont icon-shouye font-28"></span>
      </template>
      首页
    </van-tabbar-item>
    <van-tabbar-item to="/type">
      <template #icon="props">
        <span class="iconfont icon-fenlei font-28"></span>
      </template>
      分类
    </van-tabbar-item>
    <van-tabbar-item to="/cart">
      <template #icon="props">
        <van-badge :content="shoppNum" :show-zero="false">
          <span class="iconfont icon-gouwuche font-28"></span>
        </van-badge>
      </template>
      购物
    </van-tabbar-item>
    <van-tabbar-item to="/my">
      <template #icon="props">
        <span class="iconfont icon-wode font-28"></span>
      </template>
      我的
    </van-tabbar-item>
  </van-tabbar>
</template>
<style></style>
